<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
  <title>Checkout - Payment</title>
  <style>
  body { font-family:sans-serif; width:720px; }
  a { text-decoration:none; color:#00f; }
  form { overflow:hidden; }
  fieldset { width:300px; float:left; margin:0 10px 20px 0; padding:0 20px 10px; }
  legend { font-weight:bold; }
  p { width:100%; overflow:hidden; }
  fieldset label { display:inline-block; width:120px; }
  fieldset input { width:165px; }
  </style>
  
  <script type="text/javascript">
	
	
	
	
    function copyAddress(checked) {
    	var billFirst = document.getElementById("bill-first");
    	var billLast = document.getElementById("bill-last");
    	var billAddress1 = document.getElementById("bill-address1");
    	var billAddress2 = document.getElementById("bill-address2");
    	var billCity = document.getElementById("bill-city");
    	var billCountry = document.getElementById("bill-country");
    	var billState = document.getElementById("bill-state");
    	var billZip = document.getElementById("bill-zip");
    	
    	var shipFirst = document.getElementById("ship-first");
    	var shipLast = document.getElementById("ship-last");
    	var shipAddress1 = document.getElementById("ship-address1");
    	var shipAddress2 = document.getElementById("ship-address2");
    	var shipCity = document.getElementById("ship-city");
    	var shipCountry = document.getElementById("ship-country");
    	var shipState = document.getElementById("ship-state");
    	var shipZip = document.getElementById("ship-zip");
    	
    	if(checked){
    		shipFirst.value = billFirst.value ;
    		shipLast.value = billLast.value ;
    		shipAddress1.value = billAddress1.value ;
    		shipAddress2.value = billAddress2.value ;
    		shipCity.value = billCity.value ;
    		shipCountry.value = billCountry.value ;
    		shipState.value = billState.value ;
    		shipZip.value = billZip.value ;
    	}else{
    		shipFirst.value = "";
    		shipLast.value = "";
    		shipAddress1.value = "";
    		shipAddress2.value = "";
    		shipCity.value = "";
    		shipCountry.value = "";
    		shipState.value = "";
    		shipZip.value = "";
    	}
    }
    
    function checkSubmit(){
    	var billFirst = document.getElementById("bill-first");
    	var billLast = document.getElementById("bill-last");
    	var billAddress1 = document.getElementById("bill-address1");
    	var billAddress2 = document.getElementById("bill-address2");
    	var billCity = document.getElementById("bill-city");
    	var billCountry = document.getElementById("bill-country");
    	var billState = document.getElementById("bill-state");
    	var billZip = document.getElementById("bill-zip");
    	
    	var shipFirst = document.getElementById("ship-first");
    	var shipLast = document.getElementById("ship-last");
    	var shipAddress1 = document.getElementById("ship-address1");
    	var shipAddress2 = document.getElementById("ship-address2");
    	var shipCity = document.getElementById("ship-city");
    	var shipCountry = document.getElementById("ship-country");
    	var shipState = document.getElementById("ship-state");
    	var shipZip = document.getElementById("ship-zip");
    	
    	if(billFirst.value == "" ){
    		alert("Billing Address [First Name] is empty!!");
    		return false;
    	}
    	if(billLast.value == "" ){
    		alert("Billing Address [Last Name] is empty!!");
    		return false;
    	}
    	if(billAddress1.value == "" ){
    		alert("Billing Address [Address1] is empty!!");
    		return false;
    	}
    	if(billCity.value == "" ){
    		alert("Billing Address [City] is empty!!");
    		return false;
    	}
    	if(billCountry.value == "" ){
    		alert("Billing Address [Country] is empty!!");
    		return false;
    	}
    	if(billState.value == "" ){
    		alert("Billing Address [State/Province] is empty!!");
    		return false;
    	}
    	if(billZip.value == "" ){
    		alert("Billing Address [Zip/Postcod] is empty!!");
    		return false;
    	}
    	
    	if(shipFirst.value == "" ){
    		alert("Shipping Address [First Name] is empty!!");
    		return false;
    	}
    	if(shipLast.value == "" ){
    		alert("Shipping Address [Last Name] is empty!!");
    		return false;
    	}
    	if(shipAddress1.value == "" ){
    		alert("Shipping Address [Address1] is empty!!");
    		return false;
    	}
    	if(shipCity.value == "" ){
    		alert("Shipping Address [City] is empty!!");
    		return false;
    	}
    	if(shipCountry.value == "" ){
    		alert("Shipping Address [Country] is empty!!");
    		return false;
    	}
    	if(shipState.value == "" ){
    		alert("Shipping Address [State/Province] is empty!!");
    		return false;
    	}
    	if(shipZip.value == "" ){
    		alert("Shipping Address [Zip/Postcod] is empty!!");
    		return false;
    	}
    	
    	
    }
  </script>
  
</head>
<body>
  
  <h2>Checkout - Billing and Shipping Address</h2>
  
  <p>You will be able to review a summary of your purchase before placing your order.</p>
  
  <form id="form" action="" onsubmit="return checkSubmit()">
    
    <fieldset>
      <legend>Billing Address</legend>
      <p><label>First Name:</label>      <input name="bill-first" id="bill-first" /></p>
      <p><label>Last Name:</label>       <input name="bill-last" id="bill-last" /></p>
      <p><label>Address 1:</label>       <input name="bill-address1" id="bill-address1" /></p>
      <p><label>Address 2:</label>       <input name="bill-address2" id="bill-address2" /></p>
      <p><label>City:</label>            <input name="bill-city" id="bill-city" /></p>
      <p><label>Country:</label>         <input name="bill-country" id="bill-country" /></p>
      <p><label>State/Province:</label>  <input name="bill-state" id="bill-state" /></p>
      <p><label>ZIP/Postcode:</label>    <input name="bill-zip" id="bill-zip" /></p>
    </fieldset>
    
    <fieldset>
      <legend>Shipping Address</legend>
      <p><label>First Name:</label>      <input name="ship-first" id="ship-first" /></p>
      <p><label>Last Name:</label>       <input name="ship-last" id="ship-last" /></p>
      <p><label>Address 1:</label>       <input name="ship-address1" id="ship-address1" /></p>
      <p><label>Address 2:</label>       <input name="ship-address2" id="ship-address2" /></p>
      <p><label>City:</label>            <input name="ship-city" id="ship-city" /></p>
      <p><label>Country:</label>         <input name="ship-country" id="ship-country" /></p>
      <p><label>State/Province:</label>  <input name="ship-state" id="ship-state" /></p>
      <p><label>ZIP/Postcode:</label>    <input name="ship-zip" id="ship-zip" /></p>
    </fieldset>
    
    <p>
      <input type="checkbox" name="copy-address" id="copy-address" onchange="copyAddress(this.checked);" />
      <label for="copy-address">Ship my order to my billing address.</label>
    </p>
    
    <p><button type="submit">Continue to Payment</button></p>
  </form>
  
</body>
</html>